<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
  </style>
</head>

<body>
  <p>姓名:<input type="text" class="userName"></p>
  <p>性别:
    <input type="radio" value="男" class="check" name="sex">男
    <input type="radio" value="女" class="check" name="sex">女
  </p>
  <p>
    爱好: <select name="" class="like">
      <option value="篮球">篮球</option>
      <option value="足球">足球</option>
      <option value="羽毛球">羽毛球球</option>
    </select>
  </p>
</body>

<script>
  // onchange 是监听表单元素 域的内容改变 
  var userName = document.getElementsByClassName('userName');
  userName[0].onchange = function () {
    console.log('userName的值改变了//....');
    //如何获取表单的值
    //通过value 不能通过innerText  和innerHTML去获取
    console.dir(this);
    console.log(this.value);
  }
  //onchange  可以监听 单选框 /复选框的值改变事件
  var check = document.querySelector('.check');
  // check.onchange = function () {
  //   console.log('单选框值改变');
  // }
  //如何单选框获取选中的这个值
  var checkArr = document.querySelectorAll('.check');
  for (var i = 0; i < checkArr.length; i++) {
    checkArr[i].onclick = function () {
      if (this.checked) {
        console.log(this.value);
      }
    }
  }

  //如何获取select选中的值
  // 被选元素.selectedIndex// 获取下拉框选中元素的索引 
  // 备选元素.options// 获取select的所有options
  var like = document.querySelector('.like');
  like.onchange = function(){
    console.log(like.selectedIndex);
    var index = like.selectedIndex;
    console.log(like.options[index].value);
  }
</script>

</html>